*{
	margin:0;
	padding:0;
}
body,html{
	height: 100%;
	width:100%;
	font-size: 10px;
	
}
#box{
	width: 100%;
	height: 100%;
	background: url(../img/img1/bk.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	position: relative;

}
#nav{
	width: 9rem;
	height: 3rem;
	position: absolute;
	left:45%;
	top:1.8rem;
	font-size:3rem;
	
}
#nav p{
	color:rgb(209,20,26);
	font-size:3rem;
}

#success{
	position: absolute;
	left:23%;
	top:6rem;
	font-size:2rem;
	color:rgb(271,125,20);
	
}


#face{
	position: absolute;
	top:9rem;
	left:15%;
	width:22rem;
	height: 20rem;
	transform-style:preserve-3d;
	transition:10s linear;
}
#result{
	position: absolute;
	left:17%;
	top:26rem;
	color:white;
	font-size:2rem;
}
#bao{
	position: absolute;
	top:40rem;
	left:30%;
}
#pengyouquan{
	position: absolute;
	top:46rem;
	left:30%;
}
#zhu{
	position: absolute;
	top:17.3rem;
	left:46%;
	width:1.3rem;
	height: 1.8rem;
    -webkit-animation-name:zhu;
	-webkit-animation-delay:0s;
	-webkit-animation-duration: 1s;
	-webkit-animation-timing-function:linear;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-direction:alternate;
	-webkit-animation-fill-mode:backwards;
	-moz-animation-name:zhu;
	-moz-animation-delay:0s;
	-moz-animation-duration: 1s;
	-moz-animation-timing-function:linear;
	-moz-animation-iteration-count:infinite;
	-moz-animation-direction:alternate;
	-moz-animation-fill-mode:backwards;
	-o-animation-name:zhu;
	-o-animation-delay:0s;
	-o-animation-duration: 1s;
	-o-animation-timing-function:linear;
	-o-animation-iteration-count:infinite;
	-o-animation-direction:alternate;
	-o-animation-fill-mode:backwards;
	-ms-animation-name:zhu;
	-ms-animation-delay:0s;
	-ms-animation-duration: 1s;
	-ms-animation-timing-function:linear;
	-ms-animation-iteration-count:infinite;
	-ms-animation-direction:alternate;
	-ms-animation-fill-mode:backwards;
    
}
@keyframes zhu{
	0%{
		/*transform: rotateZ(90deg);*/
		transform: scale(1.1);
	}
	50%{
		/*transform: rotateZ(180deg);*/
		transform: scale(0.8);
	}
	100%{
		/*transform: rotateZ(180deg);*/
		transform: scale(1.1);
	}
}
#zhu1{
	position: absolute;
	top:17.3rem;
	left:54%;
	width:1.3rem;
	height: 1.8rem;
	-webkit-animation-name:zhu1;
	-webkit-animation-delay:0s;
	-webkit-animation-duration: 1s;
	-webkit-animation-timing-function:linear;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-direction:alternate;
	/*-webkit-animation-fill-mode:backwards;*/
	-moz-animation-name:zhu1;
	-moz-animation-delay:0s;
	-moz-animation-duration: 1s;
	-moz-animation-timing-function:linear;
	-moz-animation-iteration-count:infinite;
	-moz-animation-direction:alternate;
	/*-moz-animation-fill-mode:backwards;*/
	-o-animation-name:zhu1;
	-o-animation-delay:0s;
	-o-animation-duration: 1s;
	-o-animation-timing-function:linear;
	-o-animation-iteration-count:infinite;
	-o-animation-direction:alternate;
	/*-o-animation-fill-mode:backwards;*/
	-ms-animation-name:zhu1;
	-ms-animation-delay:0s;
	-ms-animation-duration: 1s;
	-ms-animation-timing-function:linear;
	-ms-animation-iteration-count:infinite;
	-ms-animation-direction:alternate;
	/*-ms-animation-fill-mode:backwards;*/
    
}
@keyframes zhu1{
	0%{
		/*transform: rotateZ(90deg);*/
		transform: scale(1.1);
	}
	50%{
		/*transform: rotateZ(180deg);*/
		transform: scale(0.8);
	}
	100%{
		/*transform: rotateZ(180deg);*/
		transform: scale(1.1);
	}
}
#lei{
	position: absolute;
	top:18.5rem;
	left:46.5%;
	
}
#touming{
	width:100%;
	height:100%;
	background:black;
	opacity:0.8;
	display: none;
	position: relative;
}
#smile{
	position: absolute;
	top:1rem;
	left:15%;
	width:22rem;
	height:15rem;
}
#word{
	position: absolute;
	top:10rem;
	left:55%;
	width:6rem;
	color:white;
	font-size:1.5rem;
}
#word1{
	position: absolute;
	top:12rem;
	left:55%;
	width:15rem;
	color:white;
	font-size:1.5rem;
}
